img {
width: auto ;
max-width: 100% ;
height: auto ;
}
@media all and (min-width: 1050px) {
#container {
display: flex ;
flex-flow: row wrap ;
}
#header1 {
order: 1 ;
text-align: right ;
padding-top: 5vh ;
max-height: 10vh ;
width: 50% ;
}
#header2 {
order: 2 ;
text-align: left ;
padding-top: 5vh ;
max-height: 10vh ;
width: 50% ;
align-self: flex-end ;
}
#leftmargin {
order: 1 ;
width: 20%
}
#content {
order: 2 ;
width: 60% ;
text-align: center ;
height: 78vh ;
padding-top: 1vh ;
}
#rightmargin {
order: 3 ;
width: 20% ;
}
}
@media all and (min-width: 900px) and (max-width: 1049px) {
#container {
display: flex ;
flex-flow: row wrap ;
}
#header1 {
order: 1 ;
text-align: right ;
padding-top: 3vh ;
max-height: 8vh ;
width: 50% ;
}
#header2 {
order: 2 ;
text-align: left ;
padding-top: 3vh ;
max-height: 8vh ;
width: 50% ;
align-self: flex-end ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 79vh ;
padding-top: 1vh
}
#leftmargin {
order: 2 ;
display: none ;
}
#rightmargin {
order: 3 ;
display: none ;
}
}
@media all and (max-width: 899px) {
#container {
display: flex ;
flex-flow: column wrap ;
align-items: stretch ;
}
#header1 {
float: left ;
padding-top: 2vh ;
max-height: 6vh ;
width: 50% ;
}
#header2 {
float: left ;
text-align: left ;
padding-top: 3vh ;
max-height: 6vh ;
width: 75% ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 70vh ;
padding-top: 1vh
}
#leftmargin {order: 2 ;
display: none ;
}
#rightmargin {
order: 3 ;
display: none ;
}
}
@media all and (max-width: 899px) and (orientation:landscape) {
#container {
display: flex ;
flex-flow: column wrap ;
align-items: stretch ;
}
#header1 {
float: left ;
padding-top: 1vh ;
max-height: 6vh ;
width: 50% ;
}
#header2 {
float: left ;
text-align: left ;
padding-top: 4vh ;
max-height: 6vh ;
width: 75% ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 70vh ;
padding-top: 4vh ;
}
#leftmargin {order: 2 ;
display: none ;
}
#rightmargin {
order: 3 ;
display: none ;
}
}